*{
  margin: 0;
  padding: 0;
  font-size: 0;
  .container--item__msg{
    text-align: center;
    line-height: 1.2rem;
    position: absolute;
    left: .45333rem;
    right: .45333rem;
    top: 1.5rem;
    font-size: .45333rem;
    z-index: 999;
    border-radius: 4px;
  }
  .container{
    width: 100vw;
    height: 100vh;
    display: none;
    .container--item__heard{
      position: relative;
      width: 100vw;
      line-height: 1.333333rem;
      background-color: #fff;
      font-size: .45333rem;
      text-align: center;
      .container--img__wrong{
        position: absolute;
        left: .45333rem;
        top: .4rem;
        width: .45333rem;
        height: .45333rem;
      }
      .container--img__ellipsis{
        width: .56rem;
        height: .5rem;
        position: absolute;
        right: .45333rem;
        top: .4rem;
      }
    }
    .container--item__immediately{
      position: absolute;
      left: 1.52rem;
      right: 1.52rem;
      top: 0;
      bottom: 0;
      font-size: .37333rem;
      color: #fff;
      border-radius: 5px;
      text-align: center;
      height: 1.17333rem;
      line-height: 1.17333rem;
      background-color: #06bf04;
      margin: auto;
    }
    .container--item__mask{
      display: none;
      position: absolute;
      left: 0;
      top: 1.333333rem;
      right: 0;
      bottom: 1.333333rem;
      background: #4a4a4a;
      .container--mask__cont{
        position: absolute;
        left: .9333333rem;
        right: .9333333rem;
        top: 42.8%;
        bottom: 42.8%;
        margin: auto;
        background: #fff;
        min-height: 6.3rem;
        max-height: 62.4%;
        border-radius: 4px;
        .container--mask__box{
          position: absolute;
          top: -1rem;
          right: .5rem;
          .container--mask__img{
            position: absolute;
            width: .5333333rem;
            height: .5333333rem;
          }
          .container--mask__string{
            position: relative;
            display: inline-block;
            width: 2px;
            height: .45rem;
            background-color: #e5e6e5;
            left: .24rem;
            top: .55rem;
          }
        }
        .container--mask__hint {
           position: relative;
           display: block;
           font-size: .41333333rem;
           margin: .5333333rem .5333333rem;
        }
        .container--mask__tell{
           outline: none;
           display: block;
           height: 1.17333333rem;
           border: 1px solid #dcdcdc;
           border-radius: 4px;
           position: relative;
           left: .5333333rem;
           right: .5333333rem;
           margin: 0;
           font-size: .41333333rem;
           width: 86.6%;
           vertical-align: middle;
           box-sizing: border-box;
           padding-left: .2666666rem;
        }
        .container--mask__code{
          outline: none;
          margin-top: .333333rem;
          height: 1.17333333rem;
          border: 1px solid #dcdcdc;
          border-radius: 4px;
          width: 50%;
          margin-left: .5333333rem;
          vertical-align: middle;
          box-sizing: border-box;
          font-size: .41333333rem;
          padding-left: .2666666rem;
        }
        .container--mask__getCode{
          display: inline-block;
          width: 34%;
          margin-top: .333333rem;
          position: absolute;
          margin-left: .24rem;
          border-radius: 4px;
          line-height: 1.17333333rem;
          background: #dddddd;
          font-size: .41333333rem;
          text-align: center;
          color: #fff;
        }
        .container--mask__register{
          display: inline-block;
          position: relative;
          left: .5333333rem;
          right: .5333333rem;
          top: .56rem;
          bottom: .5333333rem;
          line-height: 1.17333333rem;
          text-align: center;
          color: #fff;
          background-color: #06bf04;
          border-radius: 4px;
          width: 86.6%;
          font-size: .41333333rem;
        }
      }
    }
    .container--item__bottom{
      position: absolute;
      bottom: 0;
      width: 100vw;
      height: 1.333333rem;
      background: #fff;
      .container--img__left{
        position: absolute;
        left: 3.56rem;
        top: .4rem;
        width: .49333333rem;
        height: .49333333rem;
      }
      .container--img__right{
        position: absolute;
        right: 3.56rem;
        top: .4rem;
        width: .55rem;
        height: .55rem;
      }
    }
  }
  /*翻译部分*/
  .container--translate{
    //display: none;
    width: 100vw;
    height: 100vh;
    .container--translate__content{
      display: block;
      margin: auto;
      position: relative;
      top: 1rem;
      font-size: .32rem;
      width: 90vw;
      height: 20vh;
      border-radius: 5px;
      border: 1px solid #ccc;
    }
    .container--translate__show{
      margin: 4rem auto 0 auto;
      width: 90vw;
      height: 20vh;
      font-size: .5rem;
      border-radius: 5px;
      border: 1px solid #ccc;
      background-color: #dcdcdc;
    }
    #container--translate__btn{
      display: block;
      margin: auto;
      position: relative;
      min-width: 50vw;
      left: .2rem ;
      top: 2.5rem;
      height: 1rem;
      border-radius: 5px;
      border: none;
      background-color: #06bf04;
      color: white;
      font-size: .32rem;
    }
  }
}

